<template>
  <view class="category">
    <div class="take">
      <view class="search-container">
        <view class="input-wrapper">
          <!-- 搜索框 -->
          <input
              class="search-input"
              v-model="jbsName"
              placeholder="请输入剧本名称"
              :style="{'flex': '8', 'height': '80rpx', 'font-size': '28rpx', 'color': '#333', 'padding': '0 30rpx', 'border-radius': '40rpx 0 0 40rpx', 'background': '#f5f5f5'}"
          />
          <!-- 搜索按钮 -->
          <button @click="loadProducts" class="search-button" :style="{'flex': '2', 'height': '80rpx', 'font-size': '28rpx', 'color': '#fff', 'background': '#6c0e7a', 'border': 'none', 'border-radius': '0 40rpx 40rpx 0'}">
            搜索
          </button>
        </view>
      </view>
    </div>
    <!-- 商品展示区 -->
    <scroll-view scroll-y class="product-container" >
      <view class="product-grid" :class="{ 'single-column': isSuitCategory }">
        <view class="product-item" 
              v-for="(item, index) in products"
              :key="index"
              @tap="viewDetail(item)"
              :class="{ 'suit-item': isSuitCategory }">
          <image :src="url+`${item.images?item.images.split(',')[0]:''}`"
                 mode="aspectFill" 
                 class="product-image">
          </image>
          <view class="product-info">
            <text class="product-name">{{item.title}}</text>
            <text class="product-desc" v-if="isSuitCategory">{{item.description}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.search-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}

.input-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 40rpx;
  overflow: hidden;
}

.search-input {
  flex: 8; /* 搜索框占比 8 */
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  padding: 0 30rpx;
  background-color: #f5f5f5;
  border: none;
  outline: none;
}

.search-button {
  flex: 2; /* 按钮占比 2 */
  height: 80rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #d01e97;
  border: none;
  border-radius: 0 40rpx 40rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category {
  min-height: 100vh;
  background: #000;
  position: relative;
  padding-top: var(--status-bar-height);
}

.product-container {
  height: calc(100vh - var(--status-bar-height) - 88rpx);
  transition: all 0.3s ease;
}

.product-grid {

  padding: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  transition: all 0.3s ease;
}

.single-column {
  grid-template-columns: 1fr !important;
  padding: 30rpx;
}

.suit-item {
  margin-bottom: 40rpx !important;
  background: #111 !important;
  border-radius: 20rpx !important;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2) !important;
}

.suit-item .product-image {
  width: 100% !important;
  height: 800rpx !important;
  transition: all 0.3s ease;
}

.suit-item .product-info {
  padding: 30rpx !important;
  background: linear-gradient(to top, #111, rgba(17,17,17,0.9));
}

.suit-item .product-name {
  font-size: 32rpx !important;
  color: #fff;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.suit-item .product-desc {
  font-size: 26rpx;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-top: 10rpx;
}

.product-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  line-height: 1.5;
}

.full-width .product-grid {
  margin-left: 0;
}

.product-item {
  background: #111;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 420rpx;
  background: #222;
  transition: all 0.3s ease;
}

.product-info {
  padding: 20rpx;
  background: linear-gradient(to top, #111, rgba(17,17,17,0.9));
}

.product-name {
  display: block;
  color: #fff;
  font-size: 26rpx;
  text-align: center;
  font-weight: 300;
  letter-spacing: 1rpx;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-item {
  animation: fadeIn 0.5s ease;
}
</style>

<script>
import API from '@/api/config.js'

export default {
  data() {
    return {
      url:'http://localhos1t:8080/download/',
      jbsName:'',
      products: [],
      allProducts: []
    }
  },
  
  computed: {

  },

  onShow() {
    this.url = API.BASE_URL_IMAGE
    this.loadProducts();
  },

  methods: {


    loadProducts() {
      this.jbsName
      uni.request({
        url: API.GOWN_LISTByName+'?jbsName='+this.jbsName,
        success: (res) => {
          if (res.data.code === 200) {
            this.products = res.data.data;
            this.allProducts = [...this.products];
          }
        }
      });
    },

    toggleCategory() {
      this.showCategory = !this.showCategory;
    },
    
    viewDetail(item) {
        uni.navigateTo({
            url: `/pages/jbs-detail/jbs-detail?id=${item.id}`
        });
    }
  }
}
</script>
